<template>
  <div class>
    <h1>1自定义聚焦指令</h1>
    <input type="text" v-focus>
    <el-divider></el-divider>

    <h1>2自定义点击防抖节流指令</h1>
    <el-button v-disable:mousemove @click="btnClick" type="primary">传入arg mousemove</el-button>
    <el-button v-disable @click="btnClick" type="primary">不传value 默认1s</el-button>
    <el-button v-disable="5000" @click="btnClick" type="danger">传入value 5s</el-button>
    <el-divider></el-divider>

    <h1>3自定义弹窗拖拽指令</h1>
    <el-button type="warning" @click="dialogVisible1 = true">弹窗1</el-button>
    <el-dialog title="提示" v-dialogDrag  :visible.sync="dialogVisible1" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-divider></el-divider>

    <h1>4自定义弹窗拖拽,双击全屏，右下角拖拽</h1>
    <el-button type="success" @click="dialogVisible2 = true">弹窗2</el-button>
    <el-dialog
      title="提示"
      ref="dialog__wrapper"
      v-dialogDragWidh
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer mouse">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
	name:'directive_message',
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
    };
  },
  methods: {
    btnClick() {
      console.log(1);
    },
  },
  mounted() {
    console.log(this.$refs.dialog__wrapper);
  },
};
</script>

<style lang="scss" scoped>
.v_drag {
  background: red;
  height: 200px;
  width: 200px;
}
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    border: 1px solid red;
    flex: 1;
  }
}
</style>
